<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Y1NPE1 personnel website</title>
  <link rel="stylesheet" href="styles.css">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <!-- 头部导航 -->
  <header class="header">
    <div class="container">
      <div class="logo">我的个人主页</div>
      <nav class="nav">
        <ul class="nav-list">
          <li><a href="#about" class="nav-link">关于我</a></li>
          <li><a href="#skills" class="nav-link">技能</a></li>
          <li><a href="#projects" class="nav-link">项目</a></li>
          <li><a href="#contact" class="nav-link">联系方式</a></li>
        </ul>
      </nav>
      <button class="menu-toggle" id="menu-toggle">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </button>
    </div>
  </header>

  <!-- 移动端导航菜单 -->
  <div class="mobile-menu" id="mobile-menu">
    <ul class="mobile-nav-list">
      <li><a href="#about" class="mobile-nav-link">关于我</a></li>
      <li><a href="#skills" class="mobile-nav-link">技能</a></li>
      <li><a href="#projects" class="mobile-nav-link">项目</a></li>
      <li><a href="#contact" class="mobile-nav-link">联系方式</a></li>
    </ul>
  </div>

  <main>
    <!-- 个人简介区域 -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="profile-image">
            <img src="avatar.jpg" alt="个人头像">
          </div>
          <div class="hero-text">
            <h1 class="name">Y1NPE1</h1>
            <p class="title">全栈开发工程师</p>
            <p class="bio">专注于创建美观、高效且用户友好的网站和应用程序。热爱学习新技术，解决复杂问题。</p>
            <div class="social-links">
              <a href="#" class="social-link"><i class="fab fa-github"></i></a>
              <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
              <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-link"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="about section">
      <div class="container">
        <h2 class="section-title">关于我</h2>
        <div class="about-content">
          <div class="about-info">
            <h3>个人简介</h3>
            <p>我热爱编程，不断学习新技术，并致力于创造出既美观又实用的数字产品。在工作之余，我喜欢参与开源项目，分享我的知识和经验。</p>
          </div>
          <div class="education">
            <h3>教育背景</h3>
            <div class="education-item">
              <h4>计算机科学与技术 硕士学位</h4>
              <p>北京大学 | 2015 - 2018</p>
            </div>
            <div class="education-item">
              <h4>软件工程 学士学位</h4>
              <p>清华大学 | 2011 - 2015</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技能专长 -->
    <section id="skills" class="skills section">
      <div class="container">
        <h2 class="section-title">技能专长</h2>
        <div class="skills-container">
          <div class="skill-card">
            <h3>前端开发</h3>
            <ul class="skill-list">
              <li>vue3, uniapp</li>
              <li>JavaScript</li>
              <li>HTML5, CSS3, Tailwind CSS</li>
              <li>Element Plus, Zustand</li>
              <li>响应式设计</li>
            </ul>
          </div>
          <div class="skill-card">
            <h3>后端开发</h3>
            <ul class="skill-list">
              <li>Node.js, SpringCloud</li>
              <li>Python, java, TypeScript</li>
              <li>RESTful API 设计</li>
              <li>WebSocket</li>
              <li>APIJSON, Mybatis</li>
            </ul>
          </div>
          <div class="skill-card">
            <h3>其他技能</h3>
            <ul class="skill-list">
              <li>MongoDB, PostgreSQL, MySQL</li>
              <li>Docker, Kubernetes</li>
              <li>CI/CD, GitHub Actions</li>
              <li>AWS, Vercel, Netlify, OSS</li>
              <li>测试 (Jest, Cypress)</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 项目展示 -->
    <section id="projects" class="projects section">
      <div class="container">
        <h2 class="section-title">项目展示</h2>
        <div class="projects-grid">
          <!-- 项目1 -->
          <div class="project-card">
            <div class="project-image">
              <img src="react.svg" alt="项目 1">
            </div>
            <div class="project-content">
              <h3>高仿网易云音乐</h3>
              <p>这是一个使用React和Node.js构建的全栈应用程序，具有响应式设计和现代UI/UX。</p>
              <div class="project-links">
                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 查看演示</a>
                <a href="#" class="project-link"><i class="fab fa-github"></i> 源代码</a>
              </div>
            </div>
          </div>
          <!-- 项目2 -->
          <div class="project-card">
            <div class="project-image">
              <img src="vue.svg" alt="项目 2">
            </div>
            <div class="project-content">
              <h3>某公司OA</h3>
              <p>使用vue3和APIJSON构建的全栈应用程序，具有响应式设计以及部分媒体资源托管至阿里云OSS。</p>
              <div class="project-links">
                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 查看演示</a>
                <a href="#" class="project-link"><i class="fab fa-github"></i> 源代码</a>
              </div>
            </div>
          </div>
          <!-- 项目3 -->
          <div class="project-card">
            <div class="project-image">
              <img src="jetpack_compose.svg" alt="项目 3">
            </div>
            <div class="project-content">
              <h3>POKEMON图鉴</h3>
              <p>使用Jetpack Compose构建的安卓手机端宝可梦图鉴</p>
              <div class="project-links">
                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 查看演示</a>
                <a href="#" class="project-link"><i class="fab fa-github"></i> 源代码</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我 -->
    <section id="contact" class="contact section">
      <div class="container">
        <h2 class="section-title">联系我</h2>
        <div class="contact-form-container">
          <form id="contact-form" class="contact-form">
            <div class="form-group">
              <label for="name">姓名</label>
              <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required>
            </div>
            <div class="form-group">
              <label for="message">留言</label>
              <textarea id="message" name="message" rows="4" placeholder="请输入您的留言" required></textarea>
            </div>
            <button type="submit" class="submit-btn">发送消息</button>
          </form>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <p class="copyright">© <span id="current-year"></span> Y1NPE1. 保留所有权利.</p>
        <div class="footer-social">
          <a href="#" class="footer-social-link"><i class="fab fa-github"></i></a>
          <a href="#" class="footer-social-link"><i class="fab fa-linkedin"></i></a>
          <a href="#" class="footer-social-link"><i class="fab fa-twitter"></i></a>
          <a href="#" class="footer-social-link"><i class="fas fa-envelope"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>